<!--
 * @Author: your name
 * @Date: 2021-04-09 21:58:49
 * @LastEditTime: 2021-04-12 21:06:38
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \VueDemo\src\views\LayoutView.vue
-->
<template>
  <el-container class="container-view">

    <div v-if="isMobail" v-show="isMobail && isMobailCollapse" class="drawer-bg" @click="showMenu"></div>

    <el-aside 
      class="aside-container" 
      :class="[isMobail ? 'mobail-nav' : '', isMobail && isMobailCollapse ? 'show' : '']">
        <nav-view :isCollapse="isCollapse" navWidth="220"></nav-view>
    </el-aside>

    <el-container class="main-container">

      <el-header class="header-container">
        <header-view @btnClick="showMenu" :isCollapse="isCollapse">
          这里显示的应该是title
        </header-view>
      </el-header>

      <el-main class="main-view">
        <el-scrollbar
          :native="false"
          :noresize="true">
            <p v-for="i in parseInt('100')" :key="i">{{ i }}</p>
        </el-scrollbar>
      </el-main>

    </el-container>

  </el-container>
  
</template>

<script lang='ts'>
import { 
    ElContainer,
    ElAside,
    ElHeader,
    ElMain,
    ElButton,
    ElIcon,
    ElCollapseTransition,
    ElScrollbar
  } from 'element-plus';
import { defineComponent, ref, watchEffect } from 'vue';
import NavView from '../components/nav_view/NavView.vue';
import HeaderView from '../components/header_view/HeaderView.vue';
import { throttle } from '../tools/utils';

export default defineComponent({
  name: 'LayoutView',
  components: {
    ElContainer,
    ElAside,
    ElHeader,
    ElMain,
    NavView,
    ElButton,
    ElIcon,
    ElCollapseTransition,
    ElScrollbar,
    HeaderView
  },
  setup() {
    const isCollapse = ref<boolean>(true);
    const isMobail = ref<boolean>(false);
    const isMobailCollapse = ref<boolean>(false);
    
    const showMenu = () => {
      if(!isMobail.value) {
        isCollapse.value = !isCollapse.value;
      } else {
        isMobailCollapse.value = !isMobailCollapse.value;
      }
    }

    // 监听屏幕变化
    const onresize = () => {
      const { width } = window.screen;
      //  md >= 992px
      if( width >= 992 ) { 
        // pc
        isMobail.value && (isMobail.value = false);
      } else {
        // mobail
        !isMobail.value && (isMobail.value = true);
        isCollapse.value = true;
      }
    }

    window.onresize = throttle(onresize, 500);
    // 首次进入或刷新的时候先执行一次
    onresize();

    return {
      isCollapse,
      isMobail,
      isMobailCollapse,
      showMenu
    }
  }
});
</script>

<style lang='scss'>
.container-view {
  width: 100%;
  height: inherit !important;
   
  .drawer-bg {
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .3;
    position: fixed;
    z-index: 998;
  }

  .aside-container {
    width: auto !important;
    position: relative;
    padding: 0 5px;
    background-color: #fff;
    box-shadow: 0 16px 38px -12px rgb(0 0 0 / 56%), 0 4px 25px 0 rgb(0 0 0 / 12%), 0 8px 10px -5px rgb(0 0 0 / 20%);
  }

  .mobail-nav {
    height: 100%;
    position: fixed !important;
    left: -240px;
    transition: all 0.6s;
    z-index: 999;
    visibility: hidden;
  }

  .mobail-nav.show {
    left: 0;
    visibility: visible;
  }

  .main-container {
    
    .header-container {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 0;
      height: 50px !important;
      box-shadow: 0px 2px 5px 0 rgb(200, 200, 200);
    }

    .main-view {
      padding: 0;
    }
  }
}
</style>